<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>快速构建一个APP | DiscuzQ Mobile App Doc</title>
    <meta name="description" content="DiscuzQ App document for building your application">
    <link rel="icon" href="/logo.png">
    
    <link rel="preload" href="/assets/css/0.styles.ac58cff0.css" as="style"><link rel="preload" href="/assets/js/app.cb591399.js" as="script"><link rel="preload" href="/assets/js/2.4852b8e0.js" as="script"><link rel="preload" href="/assets/js/6.dccfc335.js" as="script"><link rel="prefetch" href="/assets/js/3.f88216ef.js"><link rel="prefetch" href="/assets/js/4.f3be68de.js"><link rel="prefetch" href="/assets/js/5.3e654332.js"><link rel="prefetch" href="/assets/js/7.2c700988.js"><link rel="prefetch" href="/assets/js/8.83147140.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ac58cff0.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">DiscuzQ Mobile App Doc</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/build.html" class="nav-link router-link-exact-active router-link-active">快速构建</a></div><div class="nav-item"><a href="/docs/develop.html" class="nav-link">二次开发</a></div><div class="nav-item"><a href="https://github.com/virskor/DiscuzQ" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/build.html" class="nav-link router-link-exact-active router-link-active">快速构建</a></div><div class="nav-item"><a href="/docs/develop.html" class="nav-link">二次开发</a></div><div class="nav-item"><a href="https://github.com/virskor/DiscuzQ" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>快速构建一个APP</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/build.html#使用github-ci" class="sidebar-link">使用Github CI</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs/build.html#flutter安装" class="sidebar-link">Flutter安装</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs/build.html#clone代码" class="sidebar-link">Clone代码</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs/build.html#修改build-yaml" class="sidebar-link">修改build.yaml</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/build.html#http2的支持" class="sidebar-link">HTTP2的支持</a></li><li class="sidebar-sub-header"><a href="/docs/build.html#金融相关的功能" class="sidebar-link">金融相关的功能</a></li><li class="sidebar-sub-header"><a href="/docs/build.html#统计代码" class="sidebar-link">统计代码</a></li></ul></li><li><a href="/docs/build.html#如何自定义主体颜色，字体大小" class="sidebar-link">如何自定义主体颜色，字体大小</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs/build.html#生成应用图标" class="sidebar-link">生成应用图标</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs/build.html#生成启动图" class="sidebar-link">生成启动图</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs/build.html#android-编译" class="sidebar-link">Android 编译</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/docs/build.html#ios编译" class="sidebar-link">IOS编译</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="快速构建一个app"><a href="#快速构建一个app" class="header-anchor">#</a> 快速构建一个APP</h1> <p>构建一个APP非常简单，只需要按照Flutter的编译方式来进行编译即可。但是需要注意的是，如果你之前没有过Flutter的开发经验，那么您可以参照下面的过程来完成构建。</p> <h2 id="使用github-ci"><a href="#使用github-ci" class="header-anchor">#</a> 使用Github CI</h2> <p>试试GitHub CI <a href="https://github.com/naizhao/Build-Discuz-Q-Flutter" target="_blank" rel="noopener noreferrer">奶罩大佬 提供了自动化build脚本<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="flutter安装"><a href="#flutter安装" class="header-anchor">#</a> Flutter安装</h2> <p>你需要安装Flutter的开发环境。下载<a href="http://flutter.dev/" target="_blank" rel="noopener noreferrer">Flutter<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>时你可以直接下载Stable，或者Beta。而我们要用到的可能是Beta，若Flutter当前的稳定版本大于V1.15，那么你可以直接使用稳定版，而无需切换到Beta版本。<br>
如果您下载的版本是Stable，那么请参照下面的命令行切换到Beta</p> <div class="language-sh extra-class"><pre class="language-sh"><code>flutter channel beta
</code></pre></div><p>现在，如果您是在中国国内的网络环境下使用Flutter，那么您有必要阅读下面<a href="https://www.jianshu.com/p/2bb9e155cc8c" target="_blank" rel="noopener noreferrer">这些提示<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>来将Pub包管理工具的源切换。<br>
此外，在项目中的Gradle源也推荐切换，后面我们会提到。</p> <h2 id="clone代码"><a href="#clone代码" class="header-anchor">#</a> Clone代码</h2> <p>您可以到<a href="https://github.com/virskor/DiscuzQ" target="_blank" rel="noopener noreferrer">Github<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>克隆源代码到您的本机，但请确保已经安装GIT.</p> <div class="language- extra-class"><pre class="language-text"><code>git clone https://github.com/virskor/DiscuzQ
</code></pre></div><p>现在我们进入源代码目录，注意：项目代码在 ./DiscuzQ/discuz 目录下，其他目录不用理会，编译或者开发时参考的代码在此目录。<br>
安装依赖，这个过程可能漫长但取决于你的网络环境</p> <div class="language- extra-class"><pre class="language-text"><code>cd DiscuzQ/discuz
flutter pub get
</code></pre></div><h2 id="修改build-yaml"><a href="#修改build-yaml" class="header-anchor">#</a> 修改build.yaml</h2> <p>在生产或者开发时你可能需要访问不同的业务后端域名。现在你可以更改或者输入下面的信息到 ./discuz/build.yaml。但在这之前请先打开 ./discuz/build.yaml中的文件描述，来确定这些设置的作用或者关于风险的描述。<br>
每个项目都不可以缺少下面的配置信息，其他的信息可以忽略，或者在后面不断开发的过程中你可以自定义。<br>
实际上build的过程中，你可以在build script构建过程中重新生成一个build.yaml完成快速构建，这个build.yaml在生产时仅需要包含production 下配置描述，或者只选其中一个选项来覆盖APP默认BuildInfo模型的数据。<br>
https://self-signed.badssl.com/</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">development</span><span class="token punctuation">:</span>
  <span class="token key atrule">domain</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//example.chat
  <span class="token key atrule">appname</span><span class="token punctuation">:</span> DiscuzQ
  <span class="token comment">## DO NOT ENABLE THIS ITEM WHEN YOU ARE BUILD AN APPLICATION FOR YOUR USERS</span>
  <span class="token key atrule">enablePerformanceOverlay</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token comment"># 构建生产环境的APP时加载的信息</span>
<span class="token comment"># Parameters for building prodution package</span>
<span class="token key atrule">production</span><span class="token punctuation">:</span>
  <span class="token key atrule">domain</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//discuz.chat
  <span class="token key atrule">appname</span><span class="token punctuation">:</span> DiscuzQ
  <span class="token comment">## DO NOT ENABLE THIS ITEM WHEN YOU ARE BUILD AN APPLICATION FOR YOUR USERS</span>
  <span class="token key atrule">enablePerformanceOverlay</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
</code></pre></div><h3 id="http2的支持"><a href="#http2的支持" class="header-anchor">#</a> HTTP2的支持</h3> <p>build.yaml 中有可选参数，默认情况下HTTP2将不被开启，需要更改build.yaml中的设置，例:</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">production</span><span class="token punctuation">:</span>
  <span class="token comment"># 开启HTTP2 有链接复用、头部压缩、二进制传输、服务端推送等重多特性</span>
  <span class="token comment"># 暂时不建议开启，因Flutter HTTP2实测下来PUT 或者一些情况下，根本无法完成请求</span>
  <span class="token comment"># 你可能会获得 flutter: HTTP/2 error: Stream error: Stream was terminated by peer (errorCode: 1). 的错误</span>
  <span class="token key atrule">enableHttp2</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
  <span class="token comment"># 证书无法校验时，是否继续请求(忽略非法的证书)</span>
  <span class="token comment"># 注意 onBadCertificate 即便没有开启 HTTP2 的支援，也会作用的</span>
  <span class="token key atrule">onBadCertificate</span><span class="token punctuation">:</span> <span class="token boolean important">true </span>
  <span class="token comment"># 当请求完成时，连接默认继续保持15000 ms(15秒)，通过idleTimeout来自定义保持时间</span>
  <span class="token key atrule">http2idleTimeout</span><span class="token punctuation">:</span> <span class="token number">15000</span>
</code></pre></div><h3 id="金融相关的功能"><a href="#金融相关的功能" class="header-anchor">#</a> 金融相关的功能</h3> <p>实际上，现在我们还不支援这些特性，不过预先设计您可以在Build时，抹去这些功能和您实际情况所相符。<br>
现在不建议开启financial。</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">production</span><span class="token punctuation">:</span>
  <span class="token comment"># 钱包，等金融数字等功能都会被隐藏</span>
  <span class="token key atrule">financial</span><span class="token punctuation">:</span> <span class="token boolean important">false </span>
</code></pre></div><h3 id="统计代码"><a href="#统计代码" class="header-anchor">#</a> 统计代码</h3> <p>您可以使用Umeng.com的统计代码进行APP移动统计， 在https://mobile.umeng.com 申请账号并为Android APP和IOS分别创建appKey。<br>
之后再build.yaml中写入以下信息：</p> <div class="language-yml extra-class"><pre class="language-yml"><code><span class="token comment"># 推荐仅生产环境下统计</span>
<span class="token key atrule">production</span><span class="token punctuation">:</span>
  <span class="token comment"># Appkey for Android devices</span>
  <span class="token key atrule">umengAndroidAppkey</span><span class="token punctuation">:</span> 
  <span class="token comment"># Appkey for Apple IOS devices</span>
  <span class="token key atrule">umengIOSAppkey</span><span class="token punctuation">:</span> 
  <span class="token key atrule">umengChannel</span><span class="token punctuation">:</span> channel
  <span class="token key atrule">umengReportCrash</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">umengLogEnable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">umengEncrypt</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
</code></pre></div><h2 id="如何自定义主体颜色，字体大小"><a href="#如何自定义主体颜色，字体大小" class="header-anchor">#</a> 如何自定义主体颜色，字体大小</h2> <p>App自设计开始就设计了支持主题模式，所以你可以在lib/ui/ui.dart修改对应的参数，在lib/utils/global.dart中修改对应的参数完整定制。<br>
使用命令行一键生成APP的图标和启动图(todo)。</p> <h2 id="生成应用图标"><a href="#生成应用图标" class="header-anchor">#</a> 生成应用图标</h2> <p>我们使用了flutter_launcher_icons， 这使得你可以快速生成一个自己的App图标，但是这样一来你就不可以改变默认的工程配置。<br>
详细的办法参考：https://pub.dev/packages/flutter_launcher_icons<br>
我们已经在pubspec.yaml添加了相关配置，你需要做的就是替换 assets/images/app.png
注意，图片不能包含alpha通道否则会导致Appstore上架失败等，生成图标时，在项目目录运行命令即可自动生成，无需其他操作。</p> <div class="language-sh extra-class"><pre class="language-sh"><code>flutter pub run flutter_launcher_icons:main
<span class="token comment"># or</span>
<span class="token comment"># cd ./discuz</span>
<span class="token comment"># bash icon</span>
</code></pre></div><h2 id="生成启动图"><a href="#生成启动图" class="header-anchor">#</a> 生成启动图</h2> <p>和生成图标一样，超级简单。我们已经在pubspec.yaml添加了相关配置，你需要做的就是替换 assets/images/splash.png。然后在运行下面的命令行就可以啦！</p> <div class="language-sh extra-class"><pre class="language-sh"><code>flutter pub pub run flutter_native_splash:create
<span class="token comment"># or</span>
<span class="token comment"># cd ./discuz</span>
<span class="token comment"># bash splas</span>
</code></pre></div><h2 id="android-编译"><a href="#android-编译" class="header-anchor">#</a> Android 编译</h2> <p>我们推荐使用IOS模拟器开始你的调试，如果你Build Android版本，首先你需要生成一个keystore文件，存储到 ./discuz/android/目录下，并命名为android.keystore<br>
接下来，将同目录下的 key.properties.example 文件修改为 key.properties 并更新里面的签名配置内容。切记不要将其提交到Git，这些签名文件是涉及安全的。其次你还可以根据需要修改gradle文件，我们默认下使用了国内的源。
如果你无法Build，那么你可能需要更改Gradle 源 pub源，关于Pub源，建议搜索 flutter China相关内容。 gradle源，则需要注意下面的信息。<br>
我们使用了默认的源配置，但是我们也增加了国内源，建议根据情况修改 ./discuz/andorid/build.gradle 。 你可能需要重复尝试很多次，才能正常build，这取决于你的网络情况。</p> <div class="language-gradle extra-class"><pre class="language-text"><code>repositories {
    // maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    // maven{ url 'http://maven.aliyun.com/nexus/content/repositories/google'}
    // maven{ url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'}
    google() // 使用国内源，解除上面的注释
    jcenter()
}
</code></pre></div><p>之后运行下面的命令行，将会生成APK，便可以用来发布。当然如果有需要你还可以加固。</p> <div class="language- extra-class"><pre class="language-text"><code>flutter build apk --release
</code></pre></div><h2 id="ios编译"><a href="#ios编译" class="header-anchor">#</a> IOS编译</h2> <p>值得注意，IOS编译时推荐使用Xcode进行Archive后上传，这样可以自动管理签名。当然也可以build，但这个过程繁琐。
首先你需要安装pod, xcode。
之后运行下面的命令</p> <div class="language- extra-class"><pre class="language-text"><code>cd ./discuz
flutter build ios --release --flavor production --no-codesign --verbose

cd ./discuz/ios
xcodebuild -workspace ./Runner.xcworkspace -configuration Release-production -scheme production -destination 'generic/platform=iOS' -archivePath build/ios/iphoneos/Runner.xcarchive archive -allowProvisioningUpdates

xcodebuild -exportArchive -archivePath build/ios/iphoneos/Runner.xcarchive -exportPath build/ios/iphoneos -exportOptionsPlist Runner/info.plist
</code></pre></div><p>如果使用Xcode进行编译则</p> <div class="language- extra-class"><pre class="language-text"><code>flutter clean
flutter pub get
</code></pre></div><p>之后再Xcode中，管理签名后，直接archive即可，当然你可以直接编译</p> <div class="language- extra-class"><pre class="language-text"><code>flutter build ios --release --no-codesign
</code></pre></div><p>直接编译不签名时，需要注意设置use_frameworks!相关处理，在搜索引擎搜索，否则这个命令行将无法产出app</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.cb591399.js" defer></script><script src="/assets/js/2.4852b8e0.js" defer></script><script src="/assets/js/6.dccfc335.js" defer></script>
  </body>
</html>
